// composables/useFullscreen.ts
import { ref, onUnmounted } from "vue";

export function useFullscreen(targetEl?: () => HTMLElement | null) {
  const isFullscreen = ref(false);

  const getElement = () => {
    return typeof targetEl === "function" ? targetEl() : document.documentElement;
  };

  const enterFullscreen = () => {
    const el = getElement();
    if (!el) return;

    // 各浏览器前缀的方法类型声明
    const requestMethod:
      | (() => Promise<void>)
      | ((options?: FullscreenOptions) => Promise<void>)
      | undefined =
      el.requestFullscreen ||
      (el as HTMLElement & { webkitRequestFullscreen?: () => Promise<void> })
        .webkitRequestFullscreen ||
      (el as HTMLElement & { mozRequestFullScreen?: () => Promise<void> }).mozRequestFullScreen ||
      (el as HTMLElement & { msRequestFullscreen?: () => Promise<void> }).msRequestFullscreen;

    if (requestMethod) {
      requestMethod.call(el);
    } else {
      console.warn("当前浏览器不支持全屏");
    }
  };

  const exitFullscreen = () => {
    const exitMethod: (() => Promise<void>) | undefined =
      document.exitFullscreen ||
      (document as Document & { webkitExitFullscreen?: () => Promise<void> })
        .webkitExitFullscreen ||
      (document as Document & { mozCancelFullScreen?: () => Promise<void> }).mozCancelFullScreen ||
      (document as Document & { msExitFullscreen?: () => Promise<void> }).msExitFullscreen;

    if (exitMethod) {
      exitMethod.call(document);
    }
  };

  const checkFullscreen = () => {
    const fullscreenElement: Element | null =
      document.fullscreenElement ||
      (document as Document & { webkitFullscreenElement?: Element }).webkitFullscreenElement ||
      (document as Document & { mozFullScreenElement?: Element }).mozFullScreenElement ||
      (document as Document & { msFullscreenElement?: Element }).msFullscreenElement ||
      null;

    isFullscreen.value = !!fullscreenElement;
  };

  // 监听全屏状态变化
  document.addEventListener("fullscreenchange", checkFullscreen);
  document.addEventListener("webkitfullscreenchange", checkFullscreen);
  document.addEventListener("mozfullscreenchange", checkFullscreen);
  document.addEventListener("MSFullscreenChange", checkFullscreen);

  const handleKeydown = (e: KeyboardEvent) => {
    if (e.key === "Escape" && isFullscreen.value) {
      console.log("按下了ESC");
      exitFullscreen();
    }
    if (e.key === "a" && isFullscreen.value) {
      console.log("按下了A");
      exitFullscreen();
    }
  };
  document.addEventListener("keydown", handleKeydown);

  // 清除监听
  onUnmounted(() => {
    document.removeEventListener("fullscreenchange", checkFullscreen);
    document.removeEventListener("webkitfullscreenchange", checkFullscreen);
    document.removeEventListener("mozfullscreenchange", checkFullscreen);
    document.removeEventListener("MSFullscreenChange", checkFullscreen);
    document.removeEventListener("keydown", handleKeydown);
  });

  return {
    isFullscreen,
    enterFullscreen,
    exitFullscreen,
  };
}
